<template>
    <vue-office-docx
        v-if="isDoc"
        :src="base.wordname"
        style="height: 100vh;"
        @rendered="renderedHandler"
        @error="errorHandler"
    />
    <vue-office-excel
        v-if="isExcel"
        :src="base.wordname"
        style="height: 100vh;"
    />
    <vue-office-pdf 
        v-if="isPdf"
        :src="base.wordname"
    />
</template>
<script setup>
import {  ref } from "vue";
import { useSystemStore } from "@/store/modules/system";
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx';
import VueOfficePdf from '@vue-office/pdf';
import VueOfficeExcel from '@vue-office/excel';
//引入相关样式
import '@vue-office/docx/lib/index.css';
import '@vue-office/excel/lib/index.css';


const base = useSystemStore();
const renderedHandler=()=>{
  console.log("渲染完成")
}
const errorHandler=()=>{
  console.log("渲染失败")
}
const isDoc=ref(false);
const isExcel=ref(false);
const isPdf=ref(false);
function getWord(){
    const fileExtension = base.wordname.split('.').pop();
    if(fileExtension==="pdf"){
        isPdf.value = true;
    }else if(fileExtension==="excel"){
        isExcel.value = true;
    }else{
        isDoc.value = true;
    }
    
}
onMounted(()=>{
    getWord();
})
</script>